// Zurmo is a customer relationship management program developed by
// Zurmo, Inc. Copyright (C) 2014 Zurmo Inc.
//
// Zurmo is free software; you can redistribute it and/or modify it under
// the terms of the GNU Affero General Public License version 3 as published by the
// Free Software Foundation with the addition of the following permission added
// to Section 15 as permitted in Section 7(a): FOR ANY PART OF THE COVERED WORK
// IN WHICH THE COPYRIGHT IS OWNED BY ZURMO, ZURMO DISCLAIMS THE WARRANTY
// OF NON INFRINGEMENT OF THIRD PARTY RIGHTS.
//
// Zurmo is distributed in the hope that it will be useful, but WITHOUT
// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
// FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more
// details.
//
// You should have received a copy of the GNU Affero General Public License along with
// this program; if not, see http://www.gnu.org/licenses or write to the Free
// Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
// 02110-1301 USA.
//
// You can contact Zurmo, Inc. with a mailing address at 27 North Wacker Drive
// Suite 370 Chicago, IL 60606. or at email address contact@zurmo.com.
//
// The interactive user interfaces in original and modified versions
// of this program must display Appropriate Legal Notices, as required under
// Section 5 of the GNU Affero General Public License version 3.
//
// In accordance with Section 7(b) of the GNU Affero General Public License version 3,
// these Appropriate Legal Notices must retain the display of the Zurmo
// logo and Zurmo copyright notice. If the display of the logo is not reasonably
// feasible for technical reasons, the Appropriate Legal Notices must display the words
// "Copyright Zurmo Inc. 2014. All rights reserved".

#LeaderboardListView{
	.pager{
		border: 1px solid #dfdfdf;
		border-top:none;
	}
}

.user-label{
	img{
		margin-right:10px;
		width: 24px;
		height: 24px;
		display: inline-block;
	}
	span{
		line-height: 30px;
		display: inline-block;
	}
}

.UserLeaderboardRankingForPortletView{
	.ranking{
		float: right;
	}
}

.icon-leaderboard-weekly:before{
	content:"x";
    .view-toolbar-icons();
	top:-2px;
}

.icon-leaderboard-monthly:before{
	content:":";
    .view-toolbar-icons();
   top:-2px;
}

.icon-leaderboard-overall:before{
	content:";";
    .view-toolbar-icons();
    top:-2px;
}

.points{
	display:block;
	float:left;
	color:#fff;
	.b-shadow(~"0 0 8px 0 #666, inset 0 0 0 1px #fff");
	padding:3px 6px;
	text-align:center;
	.radius(6px);
    .smaller();
	background-color: @themeColor2;
}

.ranking{
    //float: right;
    margin-right: 5px;
	display:block;
	color:#fff;
	.b-shadow(~"0 0 8px 0 #666");
	width:26px;
	height:26px;
	line-height:24px;
	vertical-align:middle;
	text-align:center;
	font-weight:bold;
	.smaller();
	.radius(50%);
    .t-shadow(none) !important;
	background-color: @themeColor2;
}

.UserLeaderboardRankingForPortletView,
.UserGamificationStatisticsForPortletView,
.UserBadgesForPortletView{
	tr{
		th:first-child, td:first-child{
			padding-left:10px !important;
		}
	}
}

#UserGamificationStatisticsForPortletView,
#UserLeaderboardRankingForPortletView{
	tr:first-child{
		td, th{
			border-top:none;
		}
	}
}

/*Badges from here*/
#UserBadgesForPortletView{
	padding:15px 15px 15px 0;
}

.game-badge,
.badge{
	cursor:help;
	position: relative;
	display: inline-block;
	max-width: 100%;
	vertical-align: bottom;
	width:50px;
	height:50px;
	.radius( 7px );
	margin:0 0 15px 15px;
	.b-shadow( ~"0px 4px 6px rgba(0, 0, 0, 0.5)" );
	#gradient > .vertical-three-colors( #f5f5f5, #eeeeee, 80%, #eeeeee );
	&:after{
		content: ' ';
		width: 100%;
		height: 100%;
		position: absolute;
		top: -1px;
		left: -1px;
		.radius(7px);
		border: solid 1px #CCC;
		.b-shadow( ~"inset 0 0 1px rgba(155,155,155,.5), inset 0 1px 0 rgba(225,225,225,.5),  inset 0 -6px 0 rgba(155,155,155,.7), inset 0 -7px 0 rgba(255,255,255,.3)");
	}
	.badge-icon{
		color: @themeColor;
	    .symbly(50px);
	    display:block;
	    text-align:center;
	    .t-shadow( ~"0 1px 0 rgba(255, 255, 255, 0.9)");
	    line-height:1;
	    vertical-align: middle;
		.b-shadow( ~"0 1px 2px rgba(0,0,0,.1)");
		.radius(6px);
		position:relative;
		z-index:2;
		&:before{
			position:relative;
			top:-2px;
		}
	}
	.badge-grade{
		font-size:11px;
		position:absolute;
		top:-8px;
		right:-8px;
		display:block;
		color:#fff;
		.b-shadow(~"0 0 8px 0 #666, inset 0 0 0 1px #fff");
		width:18px;
		height:18px;
		text-align:center;
		.radius(50%);
		line-height:18px;
		z-index:10;
		background-color: @themeColor2;
	}
	.gloss {
	    #gradient > .horizontal( rgba( 255, 255, 255, 0.3 ), rgba( 255, 255, 255, 0.1 ) );
	    height: 45%;
	    width: 100%;
	    position: absolute;
	    z-index: 1;
	    top:-1px;
	    border-bottom:1px solid rgba(0, 0,0, 0.1);
	    .b-shadow(~"inset 0px 2px 1px  rgba(255, 255, 255, 0.5)");

	    -webkit-border-top-right-radius: 27px;
	    -webkit-border-top-left-radius: 27px;
	    -webkit-border-bottom-right-radius: 120px 20px;
	    -webkit-border-bottom-left-radius: 100px 20px;

	    -moz-border-top-right-radius: 27px;
	    -moz-border-top-left-radius: 27px;
	    -moz-border-bottom-right-radius: 120px 20px;
	    -moz-border-bottom-left-radius: 100px 20px;

	    -o-border-top-right-radius: 27px;
	    -o-border-top-left-radius: 27px;
	    -o-border-bottom-right-radius: 120px 20px;
	    -o-border-bottom-left-radius: 100px 20px;

	    -ms-border-top-right-radius: 27px;
	    -ms-border-top-left-radius: 27px;
	    -ms-border-bottom-right-radius: 120px 20px;
	    -ms-border-bottom-left-radius: 100px 20px;

	    -khtml-border-top-right-radius: 27px;
	    -khtml-border-top-left-radius: 27px;
	    -khtml-border-bottom-right-radius: 120px 20px;
	    -khtml-border-bottom-left-radius: 100px 20px;

	    border-top-right-radius: 27px;
	    border-top-left-radius: 27px;
	    border-bottom-right-radius: 120px 20px;
	    border-bottom-left-radius: 100px 20px;
	}
}

.game-badge{
	margin:15px auto 25px auto;
	width:200px;
	height:200px;
	.radius( 28px );
	clear:both;
    cursor: auto;
	&:after{
		.radius(28px);
		.b-shadow( ~"inset 0 0 1px rgba(155,155,155,.5), inset 0 1px 0 rgba(225,225,225,.5),  inset 0 -20px 0 rgba(155,155,155,.7), inset 0 -21px 0 rgba(255,255,255,.3)");
	}
	.badge-icon{
		color: @themeColor;
	    font-size:200px;
		.radius(27px);
		&:before{
			position:relative;
			top:-20px;
		}
	}
}

.badge-message{
    display:block;
    text-align:center;
    width:100%;
    h3{
        color: @themeColor2 !important;
        margin-top:3px;
    }
}

.game-badge-CreateContact,
.CreateContact{
	.badge-icon:before{
		content: "y";
	}
}

.game-badge-MassEditContacts,
.MassEditContacts{
	.badge-icon:before{
		content: "?";
	}
}

.game-badge-CreateAccount,
.CreateAccount{
	.badge-icon:before{
		content: "P";
	}
}

.game-badge-MassEditAccounts,
.MassEditAccounts{
	.badge-icon:before{
		content:"]";
	}
}

.game-badge-SearchAccounts,
.SearchAccounts{
	.badge-icon:before{
		content:"=";
	}
}

.game-badge-SearchContacts,
.SearchContacts{
	.badge-icon:before{
		content:"%";
	}
}

.game-badge-SearchOpportunities,
.SearchOpportunities{
	.badge-icon:before{
		content:"+";
	}
}

.game-badge-LoginUser,
.LoginUser{
	.badge-icon:before{
		content:"E";
	}
}

.game-badge-CreateLead,
.CreateLead{
	.badge-icon:before{
		content:".";
	}
}

.game-badge-CreateCall,
.CreateCall{
	.badge-icon:before{
		content:"W";
	}
}

.game-badge-CreateMeeting,
.CreateMeeting{
	.badge-icon:before{
		content:"U";
	}
}

.game-badge-CreateNote,
.CreateNote{
	.badge-icon:before{
		content:"3";
	}
}

.game-badge-CreateOpportunity,
.CreateOpportunity{
	.badge-icon:before{
		content:"9";
	}
}

.game-badge-MassEditOpportunities,
.MassEditOpportunities{
	.badge-icon:before{
		content:"[";
	}
}

.game-badge-SearchOpportunity,
.SearchOpportunity{
	.badge-icon:before{
		content:"+";
	}
}

.game-badge-WinOpportunity,
.WinOpportunity{
	.badge-icon:before{
		content:";";
	}
}

.game-badge-CreateTask,
.CreateTask{
	.badge-icon:before{
		content: "4";
	}
}

.game-badge-CreateComment,
.CreateComment{
	.badge-icon:before{
		content: "b";
	}
}

.game-badge-CreateConversation,
.CreateConversation{
	.badge-icon:before{
		content: "O";
	}
}

.game-badge-CreateMission,
.CreateMission{
	.badge-icon:before{
		content: "Q";
	}
}

.game-badge-CreateSocialItem,
.CreateSocialItem{
	.badge-icon:before{
		content: "u";
	}
}

.game-badge-CreateEmailTemplate,
.CreateEmailTemplate,
.game-badge-EditEmailTemplate,
.EditEmailTemplate {
	.badge-icon:before {
		content: '\00B6';
	}
}

.game-badge-CreateCampaign,
.CreateCampaign{
	.badge-icon:before{
		content: '\002C';
	}
}

.game-badge-CreateMarketingList,
.CreateMarketingList,
.game-badge-EditMarketingList,
.EditMarketingList {
	.badge-icon:before {
		content: '\0022';
	}
}

.game-badge-CreateReport,
.CreateReport,
.game-badge-EditReport,
.EditEmailReport {
	.badge-icon:before {
		content: "V";
	}
}

.game-badge-CreateWorkflow,
.CreateWorkflow,
.game-badge-EditWorkflow,
.EditWorkflow {
	.badge-icon:before {
		content: '\20AC';
	}
}

/*Night Icons*/
.game-badge-NightOwl,
.NightOwl{
	.badge-icon:before{
		content: "$";
	}
}

.game-badge-EarlyBird,
.EarlyBird{
	.badge-icon:before{
		content: "#";
	}
}

.game-badge-SearchProducts,
.SearchProducts,
.game-badge-CreateProduct,
.CreateProduct{
	.badge-icon:before {
		content: '\003E';
	}
}

.game-badge-CreateProductTemplate,
.CreateProductTemplate{
	.badge-icon:before {
		content: '\00AC';
	}
}

.game-badge-SearchProductTemplates,
.SearchProductTemplates,
.game-badge-CreateProductCategory,
.CreateProductCategory{
	.badge-icon:before {
		content: '\00D7';
	}
}

.game-badge-SearchProjects,
.SearchProjects{
	.badge-icon:before {
		content: '\02C7';
	}
}

.game-badge-CreateProject,
.CreateProject,
.game-badge-MassEditProjects,
.MassEditProjects,
.game-badge-SearchProject,
.SearchProject{
	.badge-icon:before{
		content: '\02C7';
	}
}

/*Big Icons for popup badges*/
.game-level-change{
	.badge-icon:before{
		content: ";";
	}
}

.game-new-badge{
	.badge-icon:before{
		content: ":";
	}
}

.game-badge-grade-change{
	.badge-icon:before{
		content: "}";
	}
}

/*Percentage Complete*/
.hasPercentCounter{
	padding-right:10px !important;
}

.percentHolder{
	
	display:inline-block;
	border:1px solid #ccc;
	.b-shadow(0 0 8px 0 rgba(153, 153, 153, 0.5));
	width:100%;
	height:16px;
	&:hover{
		.percent{
			display:inline-block;
		}
	}
}

.percent{
	display:none;
	font-size:10px;
	text-indent:3px;
	font-weight:bold;
	line-height:16px;
	position: relative;
	top:-4px;
	left: 3px;
}

.percentComplete{
	color: @themeColor;
	position: relative;
	line-height:16px;
	
	height:100%;
	padding:2px 0;
	display:inline-block;
	background-color: #f5f5f5;
	background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(255,255,255,.8) 5px, rgba(255,255,255,.8) 4px);
	background-image: -moz-repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(255,255,255,.8) 5px, rgba(255,255,255,.8) 4px);
	background-image: -ms-repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(255,255,255,.8) 5px, rgba(255,255,255,.8) 4px);
	background-image: -o-repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(255,255,255,.8) 5px, rgba(255,255,255,.8) 4px);
	background-image: -khtml-repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(255,255,255,.8) 5px, rgba(255,255,255,.8) 4px);
	background-image: repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(255,255,255,.8) 5px, rgba(255,255,255,.8) 4px);
}

.z_0{ width: 0%; }
.z_1{ width: 1%; }
.z_2{ width: 2%; }
.z_3{ width: 3%; }
.z_4{ width: 4%; }
.z_5{ width: 5%; }
.z_6{ width: 6%; }
.z_7{ width: 7%; }
.z_8{ width: 8%; }
.z_9{ width: 9%; }
.z_10{ width: 10%; }
.z_11{ width: 11%; }
.z_12{ width: 12%; }
.z_13{ width: 13%; }
.z_14{ width: 14%; }
.z_15{ width: 15%; }
.z_16{ width: 16%; }
.z_17{ width: 17%; }
.z_18{ width: 18%; }
.z_19{ width: 19%; }
.z_20{ width: 20%; }
.z_21{ width: 21%; }
.z_22{ width: 22%; }
.z_23{ width: 23%; }
.z_24{ width: 24%; }
.z_25{ width: 25%; }
.z_26{ width: 26%; }
.z_27{ width: 27%; }
.z_28{ width: 28%; }
.z_29{ width: 29%; }
.z_30{ width: 30%; }
.z_31{ width: 31%; }
.z_32{ width: 32%; }
.z_33{ width: 33%; }
.z_34{ width: 34%; }
.z_35{ width: 35%; }
.z_36{ width: 36%; }
.z_37{ width: 37%; }
.z_38{ width: 38%; }
.z_39{ width: 39%; }
.z_40{ width: 40%; }
.z_41{ width: 41%; }
.z_42{ width: 42%; }
.z_43{ width: 43%; }
.z_44{ width: 44%; }
.z_45{ width: 45%; }
.z_46{ width: 46%; }
.z_47{ width: 47%; }
.z_48{ width: 48%; }
.z_49{ width: 49%; }
.z_50{ width: 50%; }
.z_51{ width: 51%; }
.z_52{ width: 52%; }
.z_53{ width: 53%; }
.z_54{ width: 54%; }
.z_55{ width: 55%; }
.z_56{ width: 56%; }
.z_57{ width: 57%; }
.z_58{ width: 58%; }
.z_59{ width: 59%; }
.z_60{ width: 60%; }
.z_61{ width: 61%; }
.z_62{ width: 62%; }
.z_63{ width: 63%; }
.z_64{ width: 64%; }
.z_65{ width: 65%; }
.z_66{ width: 66%; }
.z_67{ width: 67%; }
.z_68{ width: 68%; }
.z_69{ width: 69%; }
.z_70{ width: 70%; }
.z_71{ width: 71%; }
.z_72{ width: 72%; }
.z_73{ width: 73%; }
.z_74{ width: 74%; }
.z_75{ width: 75%; }
.z_76{ width: 76%; }
.z_77{ width: 77%; }
.z_78{ width: 78%; }
.z_79{ width: 79%; }
.z_80{ width: 80%; }
.z_81{ width: 81%; }
.z_82{ width: 82%; }
.z_83{ width: 83%; }
.z_84{ width: 84%; }
.z_85{ width: 85%; }
.z_86{ width: 86%; }
.z_87{ width: 87%; }
.z_88{ width: 88%; }
.z_89{ width: 89%; }
.z_90{ width: 90%; }
.z_91{ width: 91%; }
.z_92{ width: 92%; }
.z_93{ width: 93%; }
.z_94{ width: 94%; }
.z_95{ width: 95%; }
.z_96{ width: 96%; }
.z_97{ width: 97%; }
.z_98{ width: 98%; }
.z_99{ width: 99%; }
.z_100{ width: 100%; }

/*Modals*/
.ModalGameNotification{
	height: auto !important;
	padding:20px;
	text-align:center;
	.b-shadow(~"inset 0 0 0 2px #ffffff,  0 0 9px 5px rgba(153, 153, 153, 0.12)");
    #gradient > .vertical-three-colors( #ffffff, #f5f5f5, 80%, #f5f5f5 );
	a{
		//.z-button();
		&:focus{
			outline:none;
		}
	}
}

.ModalGameNotificationParent{
	min-width: 310px !important;
	width:310px !important;
}

a.close-ModalGameNotification.simple-link{
	text-decoration: underline !important;
    background: none !important;
    margin-right: 10px;
    margin-left:-35px;
    .smaller();
	line-height: 27px;
	display: inline-block;
}

/*=User Profile Page*/
.UserSocialItemsForPortletView{
    margin-right: 20px !important;
    .wide.form{
        border:none;
        border-bottom: 1px solid #fff;
        .b-shadow(none);
	    float: none;
	    margin-bottom: 0;
    }
	.empty{
		display: none;
	}
}

#UserDetailsView{
	padding: 0 0 20px 0;
    .details-table{
        .clearfix() !important;
        position: relative !important;
    }
}

.gravatar-container{
    a{
        display: block;
        float: left;
        position: relative;
    }
    span{
        text-align: center;
        padding: 10px;
        position: absolute;
        z-index: 1;
        display: none;
        width:100%;
        height: auto;
        background: rgba(255, 255, 255, 0.7);
        
    }
    &:hover{
        span{
            display: block;
        }
    }
	+ .panel{
		float: left;
		+ .panel{
			clear: right;
		}
	}
}

#UserChangeAvatarView{
    .clearfix();
    .col-0{
        width:100%;
    }
    .col-1{
        width:0;
    }
    .wrapper{
        padding:0 !important;
        border: none !important;
        background:none !important;
        .b-shadow(none);
        margin-bottom: 0 !important;
        table{
            margin-bottom: 0 !important;
        }
        td{
            padding-left: 0 !important;
        }
    }
    .view-toolbar-container{
        margin-top: 0 !important;
    }
}

#customAvatarEmailAddressInput{
    float: left;
    width:100%;
    margin-top:3px;
    label{
        float: left;
        margin-top:5px;
    }
    input{
        width:70%;
    }
}

#user-gravatar-tooltip{
    margin-top:4px;
    margin-left:10px;
}

#GameRewardsRedeemListView{
	.pager.horizontal{
		border: 1px solid #DFDFDF;
		border-top:none;
	}
}

.reward-name{
	margin-bottom: 5px;
	display: block;
	span{
		font-weight: normal;
		.smaller();
		color: @textColor;
	}
}

.reward-description{
	line-height: 1.5;
	padding-bottom: 1.33em;
}

.reward-cost{
	display: inline-block;
	line-height: 16px;
	font-weight: bold;
	padding-right: 20px;
	background: url("@{path}game-dashboard/z-coin-small.png") right top no-repeat;
}

.reward-redeem-link{
	float: right;
	margin: -15px 10px 0 0;
}

